class Snake {
    //获取表示蛇的元素
    // element: HTMLElement
    // constructor() {
    //     this.element = document.getElementById("snake")!
    // }

    // 表示蛇头的元素
    head: HTMLElement;
    // 蛇的身体  htmlCollection表示集合 会时时刷新    
    bodies: HTMLCollection;
    // 获取蛇的容器
    element: HTMLElement
    constructor() {
        this.head = document.querySelector('#snake > div') as HTMLElement;
        this.bodies = document.getElementById("snake")!.getElementsByTagName('div')
        this.element = document.getElementById("snake")!
    }


    // 获取蛇的坐标(蛇头的坐标) 蛇的x轴坐标
    get x() {

        return this.head.offsetLeft
    }
    // 获取蛇的坐标(蛇头的坐标) 蛇的y轴坐标
    get y() {
        return this.head.offsetTop
    }

    // 设置蛇的坐标(蛇头的坐标) 蛇的x轴坐标
    set x(value: number) {
        if (this.x === value) {
            return
        }
        if (value < 0 || value > 290) {
            // 进入判断  蛇撞墙了
            throw new Error("蛇撞墙了")
        }

        // 修改X就是修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然

        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
            console.log("水平位置发生了移动")
            if (value > this.x) {
                value = this.x - 10
            }
            else {
                value = this.x + 10
            }
        }
        this.moveBody();
        this.head.style.left = value + 'px';
        // 检查有木有装自己
        this.checkHeadBody()
    }

    // 设置蛇的坐标(蛇头的坐标) 蛇的y轴坐标
    set y(value: number) {
        if (this.y === value) {
            return
        }
        if (value < 0 || value > 290) {
            // 进入判断  蛇撞墙了,抛出一个异常
            throw new Error("蛇撞墙了 !")
        }
        // 修改Y就是修改垂直坐标，蛇在上下移动，蛇在向上移动时，不能向下掉头，反之亦然

        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
            console.log("垂直位置发生了移动")
            if (value > this.y) {
                value = this.y - 10
            }
            else {
                value = this.y + 10
            }
        }
        this.moveBody();
        this.head.style.top = value + 'px';
        // 检查有木有装自己
        this.checkHeadBody()
    }

    // 设置蛇增加身体的方法
    addBody() {
        this.element.insertAdjacentHTML('beforeend', '<div></div>')
    }

    // 移动身体
    moveBody() {
        /**
         * 将后面的身体改为前边身体的位置
         * 举例子
            * 第5节=第4节的位置
            * 第4节=第3节的位置
            * 第3节=第2节的位置
            * 第2节=第1节的位置
         * 
         */

        // 遍历所有的身体
        for (let i = this.bodies.length - 1; i > 0; i--) {
            // 获取前边身体的位置
            let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;

            // 将这个值设置到当前身体上
            (this.bodies[i] as HTMLElement).style.left = X + "px";
            (this.bodies[i] as HTMLElement).style.top = Y + "px";
        }
    }
    // 检查头和身体有木有相撞的方法
    checkHeadBody() {
        for (let i = 1; i < this.bodies.length; i++) {
            let bd = this.bodies[i] as HTMLElement
            if (this.x === bd.offsetLeft && this.y === bd.offsetTop) {
                // 游戏结束
                throw new Error("蛇撞到自己了")
            }
        }
    }
}

export default Snake;